<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no, email=no">
		<meta name="HandheldFriendly" content="true">
		<title>三级联动</title>
		<!--<link rel="stylesheet" type="text/css" href="demo.css" />-->
		<link rel="stylesheet" type="text/css" href="ydui.css" />
		<link rel="stylesheet" type="text/css" href="mobiscroll.custom.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/comment.css" />
	</head>

	<body>
		<section class="container">
			<div class="st-item">
				<p class="st-item-title">省市区单选  <a href="js/many.html" style="color: #ffae7c;">(多选)</a></p>
				<form>
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-list-item st-border-b st-link">
								<label>所在地区：</label>
								<div class="st-input">
									<input type="text" class="cell-input" readonly id="J_Address" placeholder="请选择收货地址">
								</div>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="st-item">
				<p class="st-item-title">日期选择</p>
				<form>
					<div class="st-form-list">
						<ul class="st-list st-border-tb">
							<li class="st-list-item st-border-b st-link">
								<label>请选择时间：</label>
								<div class="st-input">
									<input type="text" id="demo_datetime" placeholder="请选择日期" />
									<!--<input type="text" class="cell-input" readonly id="J_Address" placeholder="请选择收货地址">-->
								</div>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</section>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="ydui.js" type="text/javascript" charset="utf-8"></script>
		<script src="ydui.citys.js" type="text/javascript" charset="utf-8"></script>
		<script src="mobiscroll.custom.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 省市区选择
			 */
			! function() {
				var $target = $('#J_Address');

				$target.citySelect();

				$target.on('click', function(event) {
					event.stopPropagation();
					$target.citySelect('open');
				});

				$target.on('done.ydui.cityselect', function(ret) {
					$(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
				});
			}();
			
			
			
			/**
			 * 日期选择
			 * */
			var theme = "ios";
			var mode = "scroller";
			var display = "bottom";
			var lang = "zh";
			// Date & Time demo initialization
			$('#demo_datetime').mobiscroll().datetime({
				theme: theme,
				mode: mode,
				display: display,
				lang: lang,
				dateFormat: "yyyy-mm-dd",
				minDate: new Date(2000, 3, 10, 9, 22),
				maxDate: new Date(4000, 12, 31, 23, 59),
				stepMinute: 1
			});
		</script>
	</body>

</html>